<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<view class="label">
					<text>绝缘子类型名称</text>
					<text class="required">*</text>
				</view>
				<input v-model="formData.jyzname" class="input" placeholder="请输入绝缘子类型名称"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="label">
					<text>上绝缘子连接有效长</text>
					<text class="required">*</text>
				</view>
				<input v-model="formData.jyzslen" class="input" type="number" placeholder="请输入上绝缘子连接有效长"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="label">
					<text>下绝缘子连接有效长</text>
					<text class="required">*</text>
				</view>
				<input v-model="formData.jyzxlen" class="input" type="number" placeholder="请输入下绝缘子连接有效长"
					placeholder-class="placeholder" />
			</view>
			<view class="form-item">
				<view class="label">绝缘子备注</view>
				<textarea v-model="formData.jyzmemo" class="textarea" placeholder="可填写备注，帮助记忆"
					placeholder-class="placeholder" />
			</view>
		</view>
		<view class="footer">
			<button class="save-btn" @click="handleSave">保存</button>
		</view>
		<uni-popup ref="messagePopup" type="message">
			<uni-popup-message :type="messageType" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>
<script lang="ts" setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'; // 导入路由对象
	import wbjyz from '../../../api/wanbi/wbjyz';
	
	const formData = ref({
		wbjyzid: '',
		jyzname: '',
		jyzslen: '',
		jyzxlen: '',
		jyzmemo: ''
	});
	const messagePopup = ref();
	const messageType = ref('error');
	const message = ref('');
	
	// 定义响应式变量
	const currentType = ref < number > (0); // 初始化默认值
	// 获取路由对象
	const route = useRoute();
	//生命周期函数
	onMounted(() => {
		// 从路由 query 中获取 type 参数
		const type = route.query.jyzid;
		// 类型检查和转换
		if (type !== undefined && typeof type === 'string') {
			currentType.value = parseInt(type);
		}
		wbjyz.listByWbjyzId(currentType.value).then((res: any) => {
			console.log(res)
			// 响应式数据
			formData.value = res.data;
		})
	})
	
	const showMessage = (msg : string, type : 'success' | 'error' = 'error') => {
		message.value = msg;
		messageType.value = type;
		messagePopup.value.open();
	};
	const handleSave = () => {
		if (!formData.value.jyzname) {
			showMessage('请输入绝缘子类型名称');
			return;
		}
		if (!formData.value.jyzslen) {
			showMessage('请输入上绝缘子连接有效长');
			return;
		}
		if (!formData.value.jyzxlen) {
			showMessage('请输入下绝缘子连接有效长');
			return;
		}
		
		wbjyz.updata(formData.value);
		
		showMessage('保存成功', 'success');
	};
</script>
<style>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.form {
		background-color: #ffffff;
		padding: 0 32rpx;
		margin-top: 20rpx;
	}

	.form-item {
		padding: 32rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 14px;
		color: #333333;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
	}

	.required {
		color: #ff4d4f;
		margin-left: 4rpx;
	}

	.input {
		font-size: 14px;
		color: #333333;
		width: 100%;
	}

	.textarea {
		font-size: 14px;
		color: #333333;
		width: 100%;
		height: 160rpx;
		padding: 16rpx 0;
	}

	.placeholder {
		color: #999999;
		font-size: 14px;
	}

	.footer {
		padding: 40rpx 32rpx;
		margin-top: auto;
	}

	.save-btn {
		background-color: #ff4d4f;
		color: #ffffff;
		font-size: 16px;
		border-radius: 44rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.save-btn:active {
		opacity: 0.8;
	}
</style>